<template>
  <Framework>
    <template #title>
      <div class="main-title">数据采集与爬虫全流程智评系统</div>
    </template>
    <div class="teamwork-container">
      <div class="section left-section">
        <div class="panel knowledge-target tech-panel">
          <h5 class="tech-title">小组名单</h5>
          <slot name="register-target"></slot>
        </div>
        <div class="panel ability-target tech-panel">
          <h5 class="tech-title">小组排名</h5>
          <slot name="ability-target"></slot>
        </div>
        <div class="panel quality-target tech-panel">
          <h5 class="tech-title">学生优秀榜(top 10)</h5>
          <slot name="quality-target"></slot>
        </div>
      </div>
      <div class="center-section">
        <div class="panel tree-chart tech-panel tech-panel1">
          <h5 class="tech-title">任务导向</h5>
          <slot name="tree-chart"></slot>
        </div>
        <div class="panel buttons tech-panel">
          <slot name="button-group"></slot>
        </div>
        <div class="panel performance tech-panel">
          <h5 class="tech-title">学习监控</h5>
          <slot name="performance"></slot>
        </div>
      </div>
      <div class="section right-section">
        <div class="panel knowledge-target tech-panel">
          <h5 class="tech-title">知识目标达成度</h5>
          <slot name="knowledge"></slot>
        </div>
        <div class="panel ability-target tech-panel">
          <h5 class="tech-title">能力目标达成度</h5>
          <slot name="aptitude"></slot>
        </div>
        <div class="panel quality-target tech-panel">
          <h5 class="tech-title">素养目标达成度</h5>
          <slot name="literacy"></slot>
        </div>
      </div>
    </div>
  </Framework>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Teamwork',
  data() {
    return {
      interactData: Array(12).fill({ number: 0, name: '' })
    };
  },
  mounted() {
    this.fetchInteractData();
  },
  methods: {
    async fetchInteractData() {
      try {
        const response = await axios.get('/group/allInteractRecords');
        if (response.data.errno === 0) {
          this.interactData = response.data.data;
        }
      } catch (error) {
        console.error('获取互动数据失败', error);
      }
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.teamwork-container {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
}

.main-title {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
  letter-spacing: 2px;
  margin-bottom: 5px;
  background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.2), transparent);
  padding: 10px 0;
  position: relative;
}

.main-title::before, .main-title::after {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
}

.main-title::before {
  top: 0;
}

.main-title::after {
  bottom: 0;
}

/* 面板通用样式 */
.tech-panel {
  background: rgba(0, 20, 40, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 180, 255, 0.3);
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tech-panel:hover {
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.5);
  transform: translateY(-3px);
}

.tech-panel1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
}

.tech-title {
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
  font-size: 16px;
  padding: 10px 15px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  background: rgba(0, 30, 60, 0.4);
  position: relative;
}

.tech-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
}

/* 布局样式 */
.section {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.left-section {
  padding-left: 0;
}

.right-section {
  padding-right: 0;
}

.center-section {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.panel {
  flex: 1;
  margin-bottom: 15px;
  position: relative;
}

.panel:last-child {
  margin-bottom: 0;
}

/* 特殊面板样式 */
.panel.tree-chart {
  flex: 1.5;
}

.panel.buttons {
  flex: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 角标效果 */
.tech-panel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.tech-panel:hover::after {
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-image: linear-gradient(135deg, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0)) 1;
}

/* 网格背景 */
.tech-panel1 {
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 动画效果 */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .tech-title {
    font-size: 14px;
  }
  
  .main-title {
    font-size: 20px;
  }
}
</style>